{include file="public/header" /}
<style>
    .layui-form-select {
        width: 120px;
    }

    .cycle {
        gap: 10px;
    }

    .where {
        width: 70px;
        border-radius: 5px 0 0 5px
    }

    .where-fill {
        gap: 10px;
    }

    .layui-input-suffix {
        background-color: #f5f7fa;
        color: #909399;
        border-radius: 0 5px 5px 0
    }

    .layui-text-em2 {
        margin-left: 112px;

    }

    .hide {
        display: none;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <form action="{:url('crontab/save')}" class="layui-form" lay-filter="builderForm" data-token="{$builderTableToken}"
          data-nav="{$navTitle}" data-just="false">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <input type="hidden" name="id" value="{$Request.param.id}"/>
                    <input type="hidden" name="tips" id="tips" value="{$info?$info.tips:''}">
                    {:builderFormInit([
                        'title' => '任务名称',
                        'name' => 'name',
                        'placeholder'=>'请填写任务名称',
                        'req'=> true,
                        'value'=>!empty($info)?$info['name']:'',
                    ])->getFormItemInputHtml()}
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行周期</label>
                            <div class="layui-input-block flex items-center cycle">
                                <div class="cycle-type"></div>
                                <div class="where-fill flex items-center"></div>
                            </div>
                            <div class="layui-form-mid layui-text-em layui-text-em2 tips"></div>
                        </div>
                    </div>
                    {:builderFormInit([
                        'title' => 'URL地址',
                        'name' => 'urladdress',
                        'placeholder'=>'请填写URL地址',
                        'req'=> true,
                        'value'=>!empty($info)?$info['urladdress']:'',
                        'remark' => '请不要拼接域名，以/开头'
                    ])->getFormItemInputHtml()}
                </div>
            </div>
        </div>
        {include file="public/submit" /}
    </form>
</div>
<script id="cycle-tpl" type="text/html">
    <select lay-search="" name="type" lay-filter="type">
        {{ d.forEach(function(item,index) { }}
        <option data-index="{{item.index}}" value="{{= item.type}}">{{= item.title}}</option>
        {{ }); }}
    </select>
</script>
<script id="where-fill-tpl" type="text/html">
    {{ d.condition.forEach(function(item) { }}
    {{ if(item.child) { }}
    <select name="{{= item.name}}" class="{{= item.name}}" lay-filter="{{= item.name}}">
        {{ item.child.forEach(function(item2,index2) { }}
        <option value="{{= (index2 + 1)}}">{{= item2}}</option>
        {{ }); }}
    </select>

    {{ }else{ }}
    <div class="layui-input-group {{= item.show == 1 ? 'hide':''}}">
        <input type="text" class="layui-input where {{= item.name}}" value="{{= item.val}}" name="{{= item.name}}">
        <div class="layui-input-split layui-input-suffix">
            {{= item.title}}
        </div>
    </div>
    {{ } }}
    {{ }); }}
</script>
</body>
{include file="public/footer" /}
<script>
    layui.use(['edit'], function () {
        layui.edit.render();
        const layTpl = layui.laytpl, o = layui.jquery, f = layui.form, ly = layui.layer;
        const data = [
            {
                type: "day",
                title: '每天',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 1
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 0,
                        title: '小时'
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "day-n",
                title: 'N天',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 0,
                        title: '天'
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 0,
                        title: '小时'
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "hour",
                title: '每小时',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 1
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 1
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "hour-n",
                title: 'N小时',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 1
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 0,
                        title: '小时'
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "minute-n",
                title: 'N分钟',
                condition: [
                    {
                        name: "where1",
                        val: "30",
                        show: 0,
                        title: '分钟'
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 1
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 1
                    }
                ]
            },
            {
                type: "week",
                title: '每周',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 0,
                        child: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 0,
                        title: '小时'
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "month",
                title: '每月',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 0,
                        title: '天'
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 0,
                        title: '小时'
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 0,
                        title: '分钟'
                    }
                ]
            },
            {
                type: "second-n",
                title: 'N秒',
                condition: [
                    {
                        name: "where1",
                        val: "1",
                        show: 1
                    },
                    {
                        name: "where_hour",
                        val: 1,
                        show: 1
                    },
                    {
                        name: "where_minute",
                        val: 30,
                        show: 1
                    },
                    {
                        name: "second",
                        val: '5',
                        show: 0,
                        title: '秒'
                    }
                ]
            }
        ]
        let current = data[0];
        const tips = () => {
            let text = '';
            const where1 = o('.where1').val();
            let where_hour = o('input[name="where_hour"]').val();
            let where_minute = o('input[name="where_minute"]').val();
            let second = o('input[name="second"]').val();
            if (where_hour < 0 || where_hour > 23) {
                ly.msg('0 ~ 23小时有效');
                o('input[name="where_hour"]').val('')
                return false;
            }
            if (where_minute < 0 || where_minute > 59) {
                ly.msg('0 ~ 59分钟有效');
                o('input[name="where_minute"]').val('')
                return false;
            }
            if (second < 0 || second > 59) {
                ly.msg('0 ~ 59秒有效');
                o('input[name="second"]').val('')
                return false;
            }

            where_hour = where_hour && where_hour < 10 ? '0' + where_hour : where_hour;
            where_minute = where_minute && where_minute < 10 ? '0' + where_minute : where_minute;
            switch (current.type) {
                case "day":

                    text = '每天的 ' + where_hour + ':' + where_minute + ' 执行一次';
                    break;
                case "day-n":
                    text = '每隔 ' + where1 + ' 天的 ' + where_hour + ':' + where_minute + ' 执行一次';
                    break;
                case "hour":
                    text = '每小时的第 ' + where_minute + '分钟 执行一次';
                    break;
                case "hour-n":
                    text = '每天0点开始，每隔 ' + where_hour + ' 小时的第 ' + where_minute + '分钟 执行一次';
                    break;
                case "minute-n":
                    text = '每小时的第0分钟开始，每隔 ' + where1 + '分钟 执行一次';
                    break;
                case "week":
                    const week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                    text = '每周 ' + week[where1 - 1] + ' 的 ' + where_hour + ':' + where_minute + ' 执行一次';
                    break;
                case "month":
                    text = '每月 ' + where1 + ' 号 ' + where_hour + ':' + where_minute + ' 执行一次';
                    break;
                case "second-n":
                    text = '每隔 ' + second + '秒 执行一次';
                    break;
            }

            o(".tips").text('* ' + text);
            o("#tips").val(text);
        }

        const change = () => {
            layTpl(o("#where-fill-tpl").html(), {tagStyle: 'modern'}).render(current, function (html) {
                o(".where-fill").html(html);
                f.render();
                tips();
            });
        }

        change();
        f.on('select(type)', (res) => {
            current = data[res.elem.selectedIndex];
            change();
        });

        f.on('select(where1)', (res) => {
            tips();
        });

        layTpl(o("#cycle-tpl").html(), {tagStyle: 'modern'}).render(data, function (html) {
            o(".cycle-type").html(html);
            f.render();
        });

        o('.cycle').on('input', '.where_hour', function () {
            tips();
        }).on('input', '.where_minute', function () {
            tips();
        }).on('input', '.second', function () {
            tips();
        }).on('input', '.where1', function () {
            tips();
        });

    });
</script>
</html>